import './index.css'
import Item from '../Item'
import { useEffect } from "react";
import {useSelector} from 'react-redux'

/* 
列表组件
*/
export default function List() {
  
  const todos = useSelector(state => state.todos)

  /* 
  只要todos变化了, 就会将最新的todos保存到local中
  */
  useEffect(() => { // didMount + didUpdate (todos)
    localStorage.setItem('todos_key', JSON.stringify(todos))
  }, [todos])  // 监视了todos

  return (
    <ul className="todo-main">
      {
        todos.map(todo => <Item key={todo.id} todo={todo}/>)
      }
    </ul>
  );
}
